Stefanius67 /
Formgenerator
| Conditions | 18 |
| Total Lines | 90 |
| Code Lines | 60 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
Complex classes like FormCKEdit.js ➔ loadEditor often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
| 1 | /** global: displayJSError */ |
||
| 4 | /** |
||
| 5 | * Class to load, configure the CKEditor and connect to Rich Filemanager |
||
| 6 | * if available. |
||
| 7 | */ |
||
| 8 | class FormCKEditor |
||
| 9 | { |
||
| 10 | /** |
||
| 11 | * Constructor get the configuration passed from PHP. |
||
| 12 | */ |
||
| 13 | constructor(config) |
||
| 14 | { |
||
| 15 | this.config = config; |
||
| 16 | this.oEditor = null; |
||
| 17 | } |
||
| 18 | |||
| 19 | /** |
||
| 20 | * Load the CKEditor: |
||
| 21 | * - replace the textarea and pass option from PHP configuration |
||
| 22 | * - create custom buttons if specified |
||
| 23 | * - set if data (content) if comes through the PHP options |
||
| 24 | * - connect to Rich Filemanager if configured |
||
| 25 | */ |
||
| 26 | load() |
||
| 27 | { |
||
| 28 | this.replaceTextArea(); |
||
| 29 | this.createCustomButtons(); |
||
| 30 | if (this.config.CKEditor.editorData !== undefined) { |
||
| 31 | this.oEditor.setData(this.config.CKEditor.editorData); |
||
| 32 | } |
||
| 33 | if (this.config.RichFilemanager !== undefined) { |
||
| 34 | CKEDITOR.on('dialogDefinition', (event) => {this.connectRichFilemanager(event);}); |
||
| 35 | } |
||
| 36 | } |
||
| 37 | |||
| 38 | /** |
||
| 39 | * Replace the textarea and pass option from PHP configuration. |
||
| 40 | * Dimensions of the textarea are saved and set in the 'instanceReady' event to the created editor |
||
| 41 | */ |
||
| 42 | replaceTextArea() |
||
| 43 | { |
||
| 44 | var oTA = document.getElementById(this.config.CKEditor.editorID); |
||
| 45 | if (!oTA) { |
||
| 46 | if (typeof displayJSError === "function") { |
||
| 47 | displayJSError('Element [' + this.config.CKEditor.editorID + 'to be replaced by CKEditor not exists!', 'error'); |
||
| 48 | } |
||
| 49 | return; |
||
| 50 | } |
||
| 51 | // get initial size of textarea to replace |
||
| 52 | var iHeight = oTA.offsetHeight; |
||
| 53 | var iWidth = oTA.offsetWidth; |
||
| 54 | this.oEditor = CKEDITOR.replace(this.config.CKEditor.editorID, this.config.CKEditor.editorOptions); |
||
| 55 | // resize to desired size |
||
| 56 | this.oEditor.on('instanceReady', function(event) {event.editor.resize(iWidth, iHeight);}); |
||
| 57 | } |
||
| 58 | |||
| 59 | /** |
||
| 60 | * create custom buttons. |
||
| 61 | */ |
||
| 62 | createCustomButtons() |
||
| 63 | { |
||
| 64 | if (Array.isArray(this.config.CKEditor.customButtons)) { |
||
| 65 | let length = this.config.CKEditor.customButtons.length; |
||
| 66 | for (let i = 0; i < length; i++) { |
||
| 67 | this.addCustomButton(this.config.CKEditor.customButtons[i]); |
||
| 68 | } |
||
| 69 | } |
||
| 70 | } |
||
| 71 | |||
| 72 | /** |
||
| 73 | * add the custom button. |
||
| 74 | * Button and command are only added, if the specified handler is defined. |
||
| 75 | */ |
||
| 76 | addCustomButton(btn) |
||
| 77 | { |
||
| 78 | var exec = window[btn.func]; |
||
| 79 | if (typeof exec === "function") { |
||
| 80 | this.oEditor.addCommand('cmd_' + btn.func, {exec: function(oEditor) {window[btn.func](oEditor);}}); |
||
| 81 | this.oEditor.ui.addButton(btn.func, {label: btn.name, command: 'cmd_' + btn.func, icon: btn.icon}); |
||
| 82 | } else if (typeof displayJSError === "function") { |
||
| 83 | displayJSError('Handler for Custom Button [' + btn.func + '] is not defined!', 'error'); |
||
| 84 | } |
||
| 85 | } |
||
| 86 | |||
| 87 | /** |
||
| 88 | * Connect to Rich Filemanager. |
||
| 89 | * The code from the Rich Filemanager example is modified |
||
| 90 | * - jQuery code is replaced by plain javascript |
||
| 91 | * - dependen on the dialog/page (link, image, image-link) different folder to |
||
| 92 | * expand are set. |
||
| 93 | */ |
||
| 94 | connectRichFilemanager(event) |
||
| 145 |
